<template>
    <div class="upload-d">
        <el-upload
            ref="uploadFileTwo"
            action="#"
            :accept="acceptInfo"
            multiple
            :show-file-list="false"
            :auto-upload='false'
            :on-change="cardChange"
            :before-upload="handleBeforeUpload"
            :on-remove="onRemove"
            style="width:100%"
        >
            <el-button class="select-btn-s" v-if="showBtn"  type="primary" icon="ele-Plus" style="margin: 10px;">{{ $t('shang-chuan') }}</el-button>
            <el-select
                v-if="isViewTwo"
                v-model="fileVal"
                :id="sId"
                multiple
                collapse-tags
                collapse-tags-tooltip
                :placeholder="fileTitle"
                @change="fileChange"
                @focus="fileFocus"
            >
                <el-option
                    v-for="item in fileOptions"
                    :key="item.uid"
                    :label="item.name"
                    :value="item.uid"
                />
            </el-select>
            <el-input v-else readOnly slot="" :placeholder="fileTitle" />
        </el-upload>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref , reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { ElMessageBox , FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import _ from "lodash";
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';

export default defineComponent({
    props: {
        fileName: {
            type: String,
            default: ''
        },
        accept: {
            type: String,
            default: ''
        },
        fileOptions: {
            type: Array,
            default: []
        },
        refNum: {
            type: Number,
            default: 0
        },
        isCancel: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: ''
        },
    },
    setup(props:any,ctx:any){
        const { proxy } = useCurrentInstance();
        const $t = proxy.$t;
        
        // =============== 多文件上传基础数据定义 =====
		const fileVal:any = ref([]) // 上传身份证下拉框model值
        const fileOptions:any = ref([])
        const showBtn = ref(false)
        const isViewTwo = ref(false)
        const uploadFileTwo:Ref = ref(null)
        const fileTitle = ref('')
        const acceptInfo = ref('')
        const sId = ref()
        acceptInfo.value = props.accept
        fileTitle.value = props.fileName
        sId.value = props.id
		// =============== 多文件上传基础数据定义 =====

        watch( () => _.cloneDeep({ firstName: toRaw(isViewTwo.value), lastName: props.isCancel }) ,(newVal) => {
            if(newVal){
                if(newVal.lastName){
                    clearFileFun()
                }
                if (newVal.firstName) {
                    ctx.emit('fileArr',toRaw(fileOptions.value))
                }
            }
        })

        // ================== 多文件上传事件 ==========

        const arrContrastFun = (arr1?:any , arr2?:any | []) => {
		    let newArr:any = []
		    if(arr1.length !== 0 && arr2.length !== 0){
		        for(let i = 0; i < arr1.length; i++){
		            for(let e = 0; e < arr2.length; e++){
		                if(arr1[i] === arr2[e].uid){
		                    newArr.push(arr2[e])
		                }
		            }
		        }
		    }
            ctx.emit('fileArr',newArr)
		    return newArr;
		}

        /*** fileChange select改变事件 */
        const fileChange:any = (val:any) => {
            uploadFileTwo.value.handleRemove((e:any) => { })
            if(val.length === 0){
                isViewTwo.value = false
                uploadFileTwo.value.clearFiles()
                fileVal.value = []
                fileOptions.value = []
            }
            if(val.length > 0){
                showBtn.value = true
            }else{
                showBtn.value = false
            }
            fileOptions.value = arrContrastFun(val , toRaw(fileOptions.value))
        }

        /*** cardChange 上传身份证改变事件 */
        const cardChange = (item:any) => {
            isViewTwo.value = true
            fileOptions.value.push(item)
            fileVal.value.push(item.uid)
            if(toRaw(fileOptions.value).length !== 0){
                showBtn.value = true
            }else{
                showBtn.value = false
            }
        }

        /*** fileFocus select获取焦点的时候触发 */
        const fileFocus = () => {
            fileOptions.value = arrContrastFun(toRaw(fileVal.value) , toRaw(fileOptions.value))
        }

        const onRemove = (file:any,fileList:any) => {
		    let getFile = JSON.parse(JSON.stringify(fileList))
		    if(getFile.length === 0){
		        showBtn.value = false
		    }
		}

        /*** handleBeforeUpload 文件上传时的钩子函数 */
        const handleBeforeUpload = (file:any) => {
            console.log(fileOptions.value,'fileOptions')
        }

        /*** clearFileFun 清空上传的文件 */
        const clearFileFun = () => {
            uploadFileTwo.value.clearFiles()
            fileOptions.value = []
            fileVal.value = []
        }

        // ================== 多文件上传事件 ==========

        onMounted(() => {
            // getNeedId()
        })

        return {
            // ==========多文件上传====
            cardChange,
            onRemove,
            showBtn,
            isViewTwo,
            fileVal,
            fileChange,
            fileFocus,
            fileOptions,
            uploadFileTwo,
            handleBeforeUpload,
            // ==========多文件上传====
            fileTitle,
            acceptInfo,
            sId,
        }
    },
})
</script>
<style scoped lang="scss">
.upload-d{
    position: relative;
    width: 100%;
    :deep(.el-upload){
        width: 100%;
        // position: absolute;
        // top: 0;
        // left: 0;
    }
    .select-btn-s{
        position: absolute;
        top: 2px;
        right: 1px;
        z-index: 3;
        margin: 0!important;
        border: none!important;
        background: rgba(255,255,255,1)!important;
        color: #0052D9!important;
        height: 28px;
    }
    .select-btn-s:active{
        color: #0052D9!important;
    }
    .select-btn-s:hover{
        color: #0052D9!important;
    }
    .upload-b{
        display: flex;
        align-items: center;
        position: absolute;
        top: 8px;
        right: 10px;
        line-height: initial;
        background: unset !important;
        :deep(a){
            background: unset !important;
            margin-right: 10px;
        }
        :deep(span){
            background: unset !important;
        }
    }
}
</style>